<template>
  <div>
    <Card>
      <tables ref="tables"
              v-model="tableData"
              :columns="columns"
              @on-row-edit="handleRowEdit"
              @on-row-remove="handleRowRemove" />
      <Row type="flex"
           justify="space-between"
           align="middle"
           style="margin-top:10px">
        <Button type="primary"
                @click="addTag()">新建标签</Button>
        <Page :total="total"
              :current="page"
              :page-size="limit"
              :page-size-opts="pageArr"
              show-elevator
              show-sizer
              show-total
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange" />
      </Row>
    </Card>
    <AddModel :isShow="isShow"
              :isEdit="isEdit"
              :item="currentItem"
              @addEvent="handleItemAdd"
              @changeEvent="handleChangeEvent"></AddModel>
  </div>
</template>

<script>
import Tables from '_c/tables'
import AddModel from './tags/add'
export default {
  name: 'content_management',
  components: {
    Tables,
    AddModel
  },
  data () {
    return {
      page: 1,
      limit: 10,
      total: 0,
      isShow: false,
      isEdit: false,
      currentIndex: 0,
      currentItem: {},
      columns: [
        {
          title: '序号',
          key: 'sort',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [h('span', params.index + 1)])
          }
        },
        {
          title: '名称',
          key: 'tagName'
        },
        {
          title: '类名',
          key: 'tagClass',
          align: 'center'
        },
        {
          title: '设置',
          slot: 'action',
          align: 'center',
          key: 'settings'
        }
      ],
      pageArr: [10, 20, 30, 50, 100],
      tableData: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    addTag () {
      this.isEdit = false
      this.isShow = true
    },
    handleChangeEvent (value) {
      this.currentItem = {}
      this.isEdit = false
      this.isShow = value
    },
    handleItemAdd (item) {
      if (!this.isEdit) {
        Service.addTag(item).then((res) => {
          if (res.code === 200) {
            console.log('添加成功')
            this.page = 1
            this.limit = 10
            this.init()
          }
        })
      } else {
        Service.updateTag(item).then((res) => {
          if (res.code === 200) {
            this.page = 1
            this.limit = 10
            this.init()
          }
        })
      }
      this.currentItem = {}
      this.isEdit = false
      this.isShow = false
    },
    onPageChange (page) {
      this.page = page
      this.init()
    },
    onPageSizeChange (size) {
      this.limit = size
      this.init()
    },
    handleRowEdit (row, index) {
      this.isShow = true
      this.isEdit = true
      this.currentIndex = index
      this.currentItem = { ...row }
    },
    handleRowRemove (row, index) {
      this.$Modal.confirm({
        title: '确定删除吗？',
        content: `删除标签"${row.tagName}"吗`,
        onOk: () => {
          Service.removeTag(row._id)
            .then((res) => {
              if (res.code === 200) {
                this.$Message.info('成功删除！')
                this.tableData = this.tableData.filter(
                  (item) => item._id !== row._id
                )
              }
            })
            .catch((err) => {
              this.$Message.info('删除失败！原因：' + err)
            })
        },
        onCancel: () => {
          this.$Message.info('取消操作！')
        }
      })
    },
    init () {
      Service.getTags({ page: this.page - 1, limit: this.limit }).then((res) => {
        this.tableData = res.list
        this.total = res.total
      })
    }
  }
}
</script>
